const kit = {
  boxSize: {
    sizeHeng: {},
    sizeSu: {}
  },
  screenSize: {},
  bottomDotCss: {
    0: {
      "background": "#FFF974",
      "-moz-transform": "0px 0px 10px 20px rgba(255,249,116,1)",
      "-webkit-box-shadow": "0px 0px 10px 20px rgba(255,249,116,1)",
      "box-shadow": "0px 0px 10px 20px rgba(255,249,116,1)"
    },
    10: {
      "background": "#F7D157",
      "-moz-transform": "0px 0px 10px 20px rgba(247,209,87,1)",
      "-webkit-box-shadow": "0px 0px 10px 20px rgba(247,209,87,1)",
      "box-shadow": "0px 0px 10px 20px rgba(247,209,87,1)"
    },
    20: {
      "background": "#EEA235",
      "-moz-transform": "0px 0px 10px 20px rgba(238,161,52,1)",
      "-webkit-box-shadow": "0px 0px 10px 20px rgba(238,161,52,1)",
      "box-shadow": "0px 0px 10px 20px rgba(238,161,52,1)"
    },
    30: {
      "background": "#E67518",
      "-moz-transform": "0px 0px 10px 20px rgba(230,115,24,1)",
      "-webkit-box-shadow": "0px 0px 10px 20px rgba(230,115,24,1)",
      "box-shadow": "0px 0px 10px 20px rgba(230,115,24,1)"
    },
    40: {
      "background": "#E1541A",
      "-moz-transform": "0px 0px 10px 20px rgba(225,284,26,1)",
      "-webkit-box-shadow": "0px 0px 10px 20px rgba(225,284,26,1)",
      "box-shadow": "0px 0px 10px 20px rgba(225,84,26,1)"
    },
    50: {
      "background": "#DC341C",
      "-moz-transform": "0px 0px 10px 20px rgba(220,53,28,1)",
      "-webkit-box-shadow": "0px 0px 10px 20px rgba(220,53,28,1)",
      "box-shadow": "0px 0px 10px 20px rgba(220,53,28,1)"
    }
  },
  init: function () {
    if (kit.isWeiXin()) {
      this.initScreenSize();
      this.initScreen();
      this.initEvent();
    } else {
      alert('请在微信中使用该功能！');
    }
  },
  initScreen: function () {
    var that = this;
    window.addEventListener(
      "onorientationchange" in window ? "orientationchange"
        : "resize", function () {
          that.changeScreen(0);
        }, false);
    that.changeScreen(0);
    // lock screen
    try {
      screen['orientation'].lock("portrait-secondary");
    } catch (e) {
      // TODO: handle exception
    }
    $(".reset-btn").on("click", function () {
      that.changeScreen(0);
    });
  },
  initScreenSize: function () {
    var $window = $(window);
    var _w = $window.width();
    var _h = $window.height();
    var w = Math.max(_w, _h);
    var h = Math.min(_w, _h);
    if (window.orientation == 90 || window.orientation == -90) {
      // 横屏
      this.boxSize.sizeHeng = {
        w: w,
        h: h
      };
      this.boxSize.sizeSu = {
        w: h + 54,
        h: w - 64
      };
    } else {
      // 竖屏
      this.boxSize.sizeHeng = {
        w: w + 64,
        h: h - 54
      };
      this.boxSize.sizeSu = {
        w: h,
        h: w
      };
    }
  },
  changeScreen: function (i) {
    var that = this;
    if (window.orientation == 90 || window.orientation == -90 || window.orientation === undefined) {
      var w = that.boxSize.sizeHeng.w;
      var h = that.boxSize.sizeHeng.h;
      // 横屏
      $(".tool-box").removeClass("screen-to-hp").css({
        top: 0,
        left: 0,
        width: w,
        height: h
      });
    } else if (window.orientation == 180 || window.orientation == 0
    ) {
      var w = that.boxSize.sizeSu.h;
      var h = that.boxSize.sizeSu.w;
      // 竖屏
      $(".tool-box").addClass("screen-to-hp").css({
        top: (w - h) / 2,
        left: (w - h) / -2,
        width: w,
        height: h
      });
    }
  },
  initEvent: function () {
    if (window['DeviceMotionEvent']) {
      window.addEventListener('deviceorientation', kit.deviceMotionHandler, false);
    } else {
      kit.log('<br/><br/><center class="tool-not-support">很抱歉<br/>您的设备不支持该功能<br/>请更换一个设备后重试。<center/>');
    }
  },
  deviceMotionHandler: function (event) {
    var value = Math.round(event.beta);
    value = value % 180;
    if (value >= 90 && value <= 180) {
      value = 180 - value;
    } else if (value <= -90 && value >= -180) {
      value = -180 - value;
    }
    // window.log("A:" + Math.round(event.alpha) + "B:" +
    // Math.round(event.beta) + "C:" + Math.round(event.gamma) + "value:" +
    // value);
    kit.showValue(value);
  },
  showValue: function (value) {
    if (window.orientation > 0) {
      value = value * -1;
    }
    value = Math.min(value, 50);
    value = Math.max(value, -50);
    $(".tool-kd-zz").css({
      "transform": "rotate(" + value + "deg)",
      "-ms-transform": "rotate(" + value + "deg)",
      "-moz-transform": "rotate(" + value + "deg)",
      "-webkit-transform": "rotate(" + value + "deg)",
      "-o-transform": "rotate(" + value + "deg)"
    });
    var str = "" + Math.abs(value);
    var html = [];
    var length = str.length;
    for (var i = 0; i < length; i++) {
      html.push('<span class="tool-num-item num' + str[i] + '">&nbsp;</span>');
    }
    html.push('<span class="tool-num-item dot">&nbsp;</span>');
    $(".tool-num-panel").html(html.join(''));
    var css = kit.bottomDotCss[Math.abs(Math.round(value / 10) * 10)];
    $(".tool-bottom-dot-box").css(css);
  },
  isWeiXin: function () {
    var ua = window.navigator.userAgent.toLowerCase();
    const flag = ua.match(/MicroMessenger/i);
    console.log(ua.match(/MicroMessenger/i))
    if (flag && flag.toString() === 'micromessenger') {
      return true;
    } else {
      return false;
    }
  },
  log: function (msg) {
    $(".tool-log-panel").html("<p>" + msg + "</p>");
  }
};

export default kit;
